<template>
    <el-dialog
      v-model="dialogVisible"
      :destroy-on-close="true"
      :align-center="true"
      width="610px"
      title="线下打款说明"
      style="padding: 20px"
    >
      <el-form
        ref="jobFormRef"
        :model="dialogData.itemInfo"
        label-width="180px"
        label-suffix=" :"
      >
        <div class="pay-info-box">
          <el-alert title="重要信息" type="error" show-icon :closable="false">
            <template #default>
              <span>请你尽快联系公司财务完成打款，以免影响项目进度。项目汇款有效期为</span><span class="pay-info-note">1小时</span>
            </template>
          </el-alert>
        </div>
            <el-form-item label="收款帐号">
              {{ dialogData.payResultInfo.accountNo || "--" }}
            </el-form-item>
            <el-form-item label="收款公司名称">
              {{ dialogData.payResultInfo.accountName || "--" }}
            </el-form-item>
            <el-form-item label="开户银行">
              {{ dialogData.payResultInfo.bankName || "--" }}
            </el-form-item>
            <el-form-item label="银行行号">
              {{ dialogData.payResultInfo.bankCode || "--" }}
            </el-form-item>
            <el-form-item label="税号">
              {{ dialogData.payResultInfo.bankNo || "--" }}
            </el-form-item>
            <el-form-item label="单号">
              <span class="billno-info">{{ dialogData.itemInfo.payNo || "--" }}</span>
            </el-form-item>
            <el-form-item label="金额">
              <span class="total-amt-info">￥ {{ dialogData.itemInfo.totalAmt || "--" }}</span>
            </el-form-item>
            <el-form-item>
              
            </el-form-item>
          <div class="pay-note-box">
            <el-alert title="注意" type="success" show-icon :closable="false">
            <template #default>
              <span>请将单号复制到打款信息备注里，没有单号或单号错误将影响后台验证。</span>
            </template>
          </el-alert>
        </div>
      </el-form>
      <template #footer>
        <!-- <el-button @click="dialogVisible = false">关闭</el-button> -->
        <el-button style="width: 100%;" v-copy="copyData" size="large" type="primary" @click="handleSubmit" :loading="btnLoading">
        一键复制并打款
      </el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ref, reactive, onMounted, computed } from "vue";
  import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { FlexJobPayVo } from "@/biz/interface/FlexjobType";
  import { ElMessage, FormInstance } from "element-plus";
  import { getPayResultConfigInfoApi} from "@/api/modules/cpyjob/pay"
  //页面的数据
  interface flexjobAbnormalDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    // 支付说明明细
    payResultInfo:{};
    //当前的数据对象
    itemInfo: FlexJobPayVo;
    //其它的数据都继续在这里加
  }
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  //弹出框的参数
  const dialogVisible = ref(false);
  //当前表单数据在这里初始化
  const dialogData = reactive<flexjobAbnormalDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    payResultInfo: {},
    itemInfo: {},
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
    dialogData.title = getOptTitle(dialogData.optType);
  
    if (dialogData.rowData) {
      initItemInfo();
      dialogData.itemInfo.totalAmt = dialogData.rowData.totalAmt; 
      dialogData.itemInfo.payNo = dialogData.rowData.payNo; 
    }
  
    dialogVisible.value = true;
  };
  
  // 一键复制的内容
  const copyData = computed(()=>{
    return "收款帐号："+dialogData.payResultInfo.accountNo
    +", 收款公司名称："+dialogData.payResultInfo.accountName
    +", 开户银行："+dialogData.payResultInfo.bankName
    +", 银行行号："+dialogData.payResultInfo.bankCode
    +", 税号："+dialogData.payResultInfo.bankNo
    +", 金额："+dialogData.itemInfo.totalAmt
    +", 单号："+dialogData.itemInfo.payNo;
  })

  //初始化页面的数据
  const initItemInfo = (): void => {
    dialogData.itemInfo = { };
  };
  
// 提交数据（新增/编辑）
const jobFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  jobFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      ElMessage.success("复制成功，请尽快完成打款.")
      dialogVisible.value = false;
    } catch (error) {
      console.log("出现异常情况,", error);
    } finally {
      btnLoading.value = false;
    }
  });
};

onMounted(async () => {
  // 获取零工岗位相关的类型
  getPayResultConfigInfoApi().then(res => {
    // JSON.parse(JSON.stringify(params));
    if(res.data){
      dialogData.payResultInfo = JSON.parse(res.data.configValue || {});
      // console.log("格式化后的数据", dialogData.payResultInfo);
    }
  });
});

//页面参数
defineExpose({    
  acceptParams
});
</script>
<style scoped lang="scss">
.pay-info-box{

  margin: 15px 0;

  .pay-info-note{
    font-size: 1.2rem;
    color: var(--el-color-danger);
    font-weight: 600;
  }
}

.billno-info{
  font-size: 1.5rem;
  color: var(--el-color-primary);
  font-weight: 600;
}

.total-amt-info{
  font-size: 1.2rem;
  color: var(--el-color-danger);
  font-weight: 600;
}
</style>
  